{% extends "website/base.html" %}
{% block content %}
<section class="section">
  <div class="card">
    <h1 class="h1">Care Needs</h1>
    <p class="p">Step 2 of 4 — Tell us what support is needed.</p>
    
    <div class="grid grid-2" style="margin-top:12px">
      <div class="card soft card-tight hover" style="cursor:pointer" data-pick="telehealth_video">
        <div class="card-title">
          <div class="icon">🧑‍⚕️</div>
          <div>
            <h3 class="h3">Telehealth consultation</h3>
            <div class="small">Video / phone / chat</div>
          </div>
        </div>
        <p class="p">Online medical consultation, treatment advice, mental health support, and follow-ups.</p>
        <div class="chips">
          <span class="chip">Fast</span><span class="chip">Confidential</span><span class="chip">Nationwide</span>
        </div>
      </div>

      <div class="card soft card-tight hover" style="cursor:pointer" data-pick="home_care">
        <div class="card-title">
          <div class="icon">🏡</div>
          <div>
            <h3 class="h3">Home care service</h3>
            <div class="small">In-person support</div>
          </div>
        </div>
        <p class="p">Elderly & companion care, post-hospital recovery, personal care, and palliative support.</p>
        <div class="chips">
          <span class="chip">Care plan</span><span class="chip">Coordinated</span><span class="chip">Trusted</span>
        </div>
      </div>
    </div>

    <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
      <a id="waRouteBtn" class="btn btn-primary btn-sm" href="https://wa.me/{{ SITE_WHATSAPP }}" target="_blank" rel="noopener">WhatsApp about this</a>
      <a class="btn btn-ghost btn-sm" href="{% url 'website:telehealth_booking' %}">Book telehealth (faster)</a>
    </div>

    <div class="sep"></div>
    <form method="post">
      {% csrf_token %}
      {% for field in form %}
        <label class="label">{{ field.label }}</label>
        {{ field }}
        {% for error in field.errors %}<div class="help" style="color:#b91c1c;font-weight:800">{{ error }}</div>{% endfor %}
      {% endfor %}
      <div class="sep"></div>
      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <a class="btn" href="{% url 'website:care_request_step1' %}">Back</a>
        <button class="btn btn-accent" type="submit">Continue</button>
      </div>
    </form>
  </div>
</section>

<script>
(function(){
  const pickCards = document.querySelectorAll('[data-pick]');
  const reqType = document.querySelector('select[name="request_type"]');
  const waBtn = document.getElementById('waRouteBtn');

  function labelFor(val){
    const map = {
      telehealth_video: 'TELEHEALTH (Video Consultation)',
      telehealth_phone: 'TELEHEALTH (Phone Consultation)',
      telehealth_chat: 'TELEHEALTH (Chat Consultation)',
      telehealth_nursing: 'TELEHEALTH Nursing Assessment / Follow-up',
      telehealth_mental: 'TELEHEALTH Mental Health Support',
      home_care: 'HOME CARE',
      post_hospital: 'POST-HOSPITAL RECOVERY',
      elderly: 'ELDERLY / COMPANION CARE',
      palliative: 'PALLIATIVE SUPPORT',
      event_medical: 'EVENT MEDICS'
    };
    return map[val] || val;
  }

  function updateWaRoute(){
    if(!waBtn || !reqType) return;
    const v = reqType.value || 'home_care';
    const msg = `Hello {{ SITE_NAME }}, I want to request: ${labelFor(v)}.\nPlease guide me.`;
    waBtn.href = `https://wa.me/{{ SITE_WHATSAPP }}?text=${encodeURIComponent(msg)}`;
  }

  pickCards.forEach(card=>{
    card.addEventListener('click', ()=>{
      const v = card.getAttribute('data-pick');
      if(reqType && v){
        reqType.value = v;
        updateWaRoute();
        // subtle selection style
        pickCards.forEach(c=>c.style.outline='none');
        card.style.outline = '2px solid rgba(124,58,237,.35)';
        card.style.outlineOffset = '2px';
      }
    });
  });

  if(reqType){
    reqType.addEventListener('change', updateWaRoute);
  }
  updateWaRoute();
})();
</script>

{% endblock %}